<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">
        <input type="button" value="交换两本书" @click="exchange">
        <ul>
            <li v-for="book in books" :key="book.id">{{book.name}}</li>
        </ul>
    </div>

    <input type="button" value="给li增加自定义属性index" onclick="addIndex()">
</body>
</html>
<script src="./js/vue.js"></script>

<script>

    let vm = new Vue({
        el:"#app",
        data:{
            books:[
                {
                    id:"001",
                    name:"三国演义"
                },
                {
                    id:"002",
                    name:"西游记"
                },
                {
                    id:"003",
                    name:"水浒传"
                }
            ]
        },
        methods:{
            exchange(){
                let firstBook = this.books.shift();
                let lastBook = this.books.pop();

                this.books.unshift(lastBook);
                this.books.push(firstBook);
            }
        }     
    });


    function addIndex(){
        let liDoms = document.querySelectorAll("li");
        for(let i=0;i<liDoms.length;i++){
            liDoms[i].setAttribute("index",i);
        }
    }
    


</script>